@extends("layouts.backend.webadmin")
@section('content')
    <script type="text/javascript" src="{{env('APP_ROOT')}}/js/echarts.min.js"></script>
    <link rel="stylesheet" href="{{env('APP_ROOT')}}/assets/bootstrap/css/bootstrap-toggle.min.css">
    <link rel="stylesheet" href="{{env('APP_ROOT')}}/css/charts.css">
    <script type="text/javascript" src="{{env('APP_ROOT')}}/assets/bootstrap/js/bootstrap-toggle.min.js"></script>
    <!-- Main content -->
    <section class="content">
        <!--统计提示-->
        <div class="row">

            <section class="col-lg-12">
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    @if($staticSyn['startTime'])
                        {{$staticSyn['startTime']}}到{{$staticSyn['endTime']}}，
                    @endif
                    漏洞管理平台录入全集团{{$staticSyn['appsNum']}}个系统/应用，有效漏洞总计{{$staticSyn['total']}}个，其中严重漏洞{{$staticSyn['seriousNum']}}个，高危漏洞{{$staticSyn['secondNum']}}个，其他漏洞{{$staticSyn['otherNum']}}个。</p>
            </section>
        </div>
        <!--图表时间筛选插件-->
        @include('backend.charts.datepicker')
        <!-- /饼图开始 -->
        <div class="row">
            <!-- Left col -->
            <section class="col-lg-5 connectedSortable">
                <!-- Custom tabs (Charts with tabs)-->
                <div class="nav-tabs-custom">
                    <!-- Tabs within a box -->
                    <ul class="nav nav-tabs pull-right">
                        <li class="pull-left header"><i class="fa fa-pie-chart"></i> {{$info->name}}漏洞统计</li>
                    </ul>
                    <div class="tab-content no-padding">
                        <!-- Morris chart - Sales -->
                        <div class="chart tab-pane active" id="total-chart" style="position: relative; height: 300px;"></div>
                        <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
                    </div>
                </div>
            </section>
            <section class="col-lg-7 connectedSortable">
                <!-- Custom tabs (Charts with tabs)-->
                <div class="nav-tabs-custom">
                    <!-- Tabs within a box -->
                    <ul class="nav nav-tabs pull-right">
                       <li class="pull-left header"><i class="fa fa-bar-chart"></i>{{$info->name}}漏洞发现总数</li>
                    </ul>
                    <div class="tab-content no-padding">
                        <!-- Morris chart - Sales -->
                        <div class="chart tab-pane active" id="barGraph-chart" style="position: relative; height: 300px;"></div>
                        <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
                    </div>
                </div>
            </section>
        </div>
        <div class="row">
            <!-- Left col -->
            <section class="col-lg-5 connectedSortable">
                <!-- Custom tabs (Charts with tabs)-->
                <div class="nav-tabs-custom">
                    <!-- Tabs within a box -->
                    <ul class="nav nav-tabs pull-right">
                        <li class="pull-left header"><i class="fa fa-pie-chart"></i>{{$info->name}}TOP{{$topNum}}漏洞类型和数量</li>
                    </ul>
                    <div id="toggleCharts"><input type="checkbox" data-toggle="toggle" data-onstyle="success" data-size="mini" id="toggleCheckbox"></div>
                    <div class="tab-content no-padding">
                        <!-- Morris chart - Sales -->
                        <div class="chart tab-pane active" id="topFive-chart" style="position: relative; height: 300px;"></div>
                        <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
                    </div>
                </div>
            </section>
            <section class="col-lg-7 connectedSortable">
                <!-- Custom tabs (Charts with tabs)-->
                <div class="nav-tabs-custom">
                    <!-- Tabs within a box -->
                    <ul class="nav nav-tabs pull-right">
                        <li class="pull-left header"><i class="fa fa-area-chart"></i>{{$info->name}}漏洞发现趋势和修复情况</li>
                    </ul>
                    <div class="tab-content no-padding">
                        <!-- Morris chart - Sales -->
                        <div class="chart tab-pane active" id="diagram-chart" style="position: relative; height: 300px;"></div>
                        <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
                    </div>
                    <input type="hidden" id="pieStatus" value="{{$pieStatus}}">
                    <input type="hidden" id="graphNum" value="{{$graphNum}}">
                    <input type="hidden" id="pieType" value="{{$pieType}}">
                    <input type="hidden" id="diagram" value="{{$diagram}}">
                </div>
            </section>
        </div>
        <!-- /饼图结束 -->
    </section>
    <!-- /.content -->
    <script type="text/javascript">
        $(function(){
            var pieStatusData = JSON.parse($('#pieStatus').val()),
                graphNumData = JSON.parse($('#graphNum').val()),
                pieTypeData = JSON.parse($('#pieType').val()),
                diagramData = JSON.parse($('#diagram').val());
//            chartsFunc.totalChart('total-chart', pieStatusData.name, pieStatusData.count, pieStatusData.confirm);
            chartsFunc.barPolarStack('total-chart', pieStatusData.name, pieStatusData.count, pieStatusData.confirm);
            chartsFunc.barGraph('barGraph-chart', graphNumData.name, graphNumData.high, graphNumData.secondary, graphNumData.low, graphNumData.id);
            chartsFunc.setChart('topFive-chart', pieTypeData.name, pieTypeData.value, false);
            chartsFunc.diagram('diagram-chart', diagramData.data.time, diagramData.data.new, diagramData.data.confirmed);
            var flag = false;
            $('.toggle-group').eq(0).click(function(){
                flag= flag==true ? false : true;
                chartsFunc.setChart('topFive-chart', pieTypeData.name, pieTypeData.value, flag);
            })
        });
        var chartsFunc = new function(){};
        //饼图-嵌套图
        chartsFunc.totalChart = function(eleId, dataname, countdata, confirmdata){
            var myChart = echarts.init(document.getElementById(eleId));
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data:dataname
                },
                series: [
                    {
                        name:'板块漏洞总数',
                        type:'pie',
                        radius: ['50%', '66%'],
                        label: {
                            normal: {
                                borderWidth: 1,
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: '#999',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    hr: {
                                        borderColor: '#aaa',
                                        width: '100%',
                                        borderWidth: 0.5,
                                        height: 0
                                    },
                                    b: {
                                        fontSize: 16,
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#eee',
                                        backgroundColor: '#334455',
                                        padding: [2, 4],
                                        borderRadius: 2
                                    }
                                }
                            }
                        },
                        data:countdata,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#ddd','#ccc'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    },
                    {
                        name:'板块修复总数',
                        type:'pie',
                        selectedMode: 'single',
                        radius: [0, '40%'],

                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true
                            }
                        },
                        data:confirmdata
                    }
                ]
            };
            myChart.setOption(option);
        };
        //饼图-常规图
        chartsFunc.setChart = function (eleId, dataname, value, bool){
            var myChart = echarts.init(document.getElementById(eleId));
            var option = {
                title : {
//                    text: '漏洞和类型top5',
                    subtext: '所占比例',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    type:'scroll',
                    orient: 'vertical',
                    left: 'left',
                    data: dataname,
                    show: true,
                    formatter: function (name) {
                        return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
                    },
                    tooltip: {
                        show: true
                    }
                },
                series : [
                    {
                        name: '当前类型数量',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data: value,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#6c71ba','#61bce4','#85c8ae','#f2bcba','#e2dc73'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                label:{
                                    show: true,
                                    // formatter: '{b} : {c} ({d}%)',
                                    formatter:function (value) {
                                        return value['name']+"\n"+value['value']+"("+value['percent']+"%)";
                                    }
                                }
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            bool == true ? myChart.setOption({legend:{show:true},series:{radius:'55%'}}) : myChart.setOption({legend:{show:false},series:{radius:'75%'}});
        };
        //柱状图
        chartsFunc.barGraph =function(eleId, dataname, high, secondary, low, dataid){
            var myChart = echarts.init(document.getElementById(eleId));
            var  option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data:['严重','高危','中危和低危']
                },
                grid: {
                    left: '3%',
                    right: '8%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        name: "板块",
                        type : 'category',
                        data : dataname,
                        axisLabel: {
                            interval: 0,
                            formatter:function(value)
                            {
                                var ret = "";//拼接加\n返回的类目项
                                var maxLength = 5;//每项显示文字个数
                                var valLength = value.length;//X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1)//如果类目项的文字大于3,
                                {
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = "";//每次截取的字符串
                                        var start = i * maxLength;//开始截取的位置
                                        var end = start + maxLength;//结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp = value.substring(start, end) + "\n";
                                        ret += temp; //凭借最终的字符串
                                    }
                                    return ret;
                                }
                                else {
                                    return value;
                                }
                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type: 'value',
                        name: '个数'
                    }
                ],
                series : [
                    {
                        name:'严重',
                        type:'bar',
                        data:high,
                        reward: dataid,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#DF2935','#DF2935','#DF2935'
                                    ];

                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        label:{
                            normal:{
                                show:true
                            }
                        }
                    },
                    {
                        name:'高危',
                        type:'bar',
                        data:secondary,
                        reward: dataid,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#F3752B','#F3752B','#F3752B'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        label:{
                            normal:{
                                show:true
                            }
                        }
                    },
                    {
                        name:'中危和低危',
                        type:'bar',
                        data:low,
                        reward: dataid,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#F1D302','#F1D302','#F1D302'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        label:{
                            normal:{
                                show:true
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            myChart.on('click', function (params) {
                var ogzid = 8;
                if (typeof params.seriesIndex != 'undefined') {
                    ogzid = option.series[params.seriesIndex].reward[params.dataIndex];
                }
                var url = '{{env("APP_ROOT")}}/admin/subBlockStatistics?level=2&id='+ogzid;
                var startTime = getCookie('startTime');
                var endTime = getCookie('endTime');
                if (startTime && endTime){
                    url += '&startTime='+startTime+'&endTime='+endTime;
                }
                window.open(url,'_self');
            });
        };
        //曲线图
        chartsFunc.diagram = function(eleId, datatime, incresedata, confirmdata){
            var myChart = echarts.init(document.getElementById(eleId));
            var option = {
//                backgroundColor: "#404A59",
//                color: ['#ffd285', '#ff733f'],
                color: ['#eb8c68', '#54b1ab'],

                title: [{
//                    text: '漏洞发现趋势及修复情况',
                    left: '1%',
                    top: '6%',
                    textStyle: {
                        color: '#999'
                    }
                }],
                tooltip: {
                    trigger: 'axis'
                },
                dataZoom: [
                    {
                        type: 'inside',
                        show: false,
                        xAxisIndex: [0],
                        start: 1,
                        end: 35
                    },
                    {
                        type: 'inside',
                        xAxisIndex: [0],
                        start: 1,
                        end: 35
                    }
                ],
                legend: {
                    x: 300,
                    top: '7%',
                    textStyle: {
                        color: '#999'
                    },
                    data: ['发现趋势', '修复情况']
                },
                grid: {
                    left: '1%',
                    right: '8%',
                    top: '16%',
                    bottom: '6%',
                    containLabel: true
                },
                toolbox: {
                    "show": false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    "name": "近"+datatime.length+"天",
                    type: 'category',
                    "axisLine": {
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    "axisTick": {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#666'
                        }
                    },
                    boundaryGap: false,
                    data: datatime
                },
                yAxis: {
                    "name":"个数",
                    "axisLine": {
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    "splitLine": {
                        show: true,
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    "axisTick": {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    },
                    type: 'value'
                },
                series: [{
                    name: '发现趋势',
                    smooth: true,
                    type: 'line',
                    symbolSize: 8,
                    symbol: 'circle',
                    data: incresedata,
                    label:{
                        normal:{
                            show:true
                        }
                    }
                }, {
                    name: '修复情况',
                    smooth: false,
                    type: 'line',
                    symbolSize: 8,
                    symbol: 'circle',
                    data: confirmdata,
                    label:{
                        normal:{
                            show:true
                        }
                    }
                }, {
                    type: 'pie',
                    center: ['83%', '33%'],
                    radius: ['25%', '30%'],
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: []
                }]
            };
            myChart.setOption(option);
        };
        //极坐标系下的堆叠柱状图
        chartsFunc.barPolarStack = function(eleId, dataname, datacount, dataconfirm){
            var myChart = echarts.init(document.getElementById(eleId));
            var option = {
                color: ['#f2bcba', '#de5853'],
                angleAxis: {
                    type: 'category',
                    data: dataname,
                    z: 10
                },
                tooltip: {
                    show: true
                },
                radiusAxis: {
                },
                polar: {
                },
                series: [ {
                    type: 'bar',
                    data: dataconfirm,
                    coordinateSystem: 'polar',
                    name: '修复数',
                    stack: 'a'
                },{
                    type: 'bar',
                    data: datacount,
                    coordinateSystem: 'polar',
                    name: '漏洞总数',
                    stack: 'a'
                }],
                legend: {
                    show: true,
                    data: ['漏洞总数','修复数']
                }
            };
            myChart.setOption(option);
        }
    </script>
@stop
@section('javascript-end')

<script>
    /*v1.3新增时间筛选*/
    $('#event_period').datepicker({
        inputs: $('.actual_range')
    });
    $(function () {
        var url = new LG.URL(window.location.href);
        if (typeof url.get('startTime') == 'undefined') {
            delCookie('startTime');
            delCookie('endTime');
        } else {
            setCookie('startTime',url.get('startTime'));
            setCookie('endTime',url.get('endTime'));
        }
        //赋值
        $("#startTime").val(getCookie('startTime'));
        $("#endTime").val(getCookie('endTime'));
        $("#time-search").click(function () {
            //删除cookie
            delCookie('startTime');
            delCookie('endTime');
            //删除参数
            url.remove('startTime');
            url.remove('endTime');
            var startTime = $("#startTime").val();
            var endTime   = $("#endTime").val();
            //写入cookie
            setCookie('startTime',startTime);
            setCookie('endTime',endTime);
            //新增参数
            url.set('startTime',startTime);
            url.set('endTime',endTime);
            //跳转
            window.location.href = url.url();
        });
        //导出
        $('a[name="importbtn"]').click(function () {
            var exportUrl = "{{ URL::route('admin.vulschart.export') }}";
            var startTime = $("#startTime").val();
            var endTime   = $("#endTime").val();
            if (typeof url.get('startTime') == 'undefined') {
                exportUrl = startTime ? exportUrl + '?startTime='+startTime+'&endTime='+endTime : exportUrl;
            } else {
                exportUrl = getUrl(exportUrl);
            }
            window.location.href = exportUrl;
        });
    });
    function getUrl(url) {
        var startTime = getCookie('startTime');
        var endTime   = getCookie('endTime');
        if (startTime && endTime){
            url += '?startTime='+startTime+'&endTime='+endTime;
        }
        return url;
    }
</script>
@stop
